<html>
	<head>
		<meta charset="UTF-8">
		<title>网上商城会员注册页面</title>
		<link type="text/css" rel="stylesheet" href="../../static/css/style.css">
		<link href="../../static/css/bootstrap.min.css" rel="stylesheet" />
		<script src="../../static/js/jquery-1.11.3.min.js"></script>
		<script src="../../static/js/bootstrap.js"></script>
		<style type="text/css">
			.login_form {
				height: 420px;
				margin-top: 25px;
			}
		</style>
		<script type="text/javascript">

                    /**
                     * 1、获取指定id的值
                     * @param objId
                     * @returns {*}
                     */
                    function val(objId) {
                        return document.getElementById(objId).value;
                    }
                    //2.1显示错误信息
                    function showTip(errObjId,text) {
                        var showObj =document.getElementById(errObjId);
                        showObj.innerHTML=text;
                        showObj.style.display="block";

                    }
                    //隐藏错误提示
                    function hideTip(errObjId) {
                        var showObj = document.getElementById(errObjId);
                        showObj.innerHTML="";
                        showObj.style.display="none";

                    }
                    //获得焦点
                    function focus(objId){
                        //指定标签获得焦点
                        document.getElementById(objId).focus();
                    }

                    //innerHTML：两个HTML元素内部的文本
                    /**
                     * onsubmit:提交按钮被点击
                     * onblur 元素失去焦点
                     * onfocus 元素获得焦点
                     */
                    function checkName() {
                        var focusObjId;//记录需要获得焦点标签的id值
                        // 1、验证用户名：必须由字母，数字下划线组成，并且长度为5到12 位
                        // var  loginName =document.getElementById("username").value;
                        var loginName = val("username");
                        if (!/^[A-Za-z0-9_]{5,12}$/.test(loginName) ){
                            //用户名输入不正确
                            // alert("用户名输入不正确");
                            showTip("usernameTip", "必须由字母，数字下划线组成，并且长度为5到12 位");
                            // document.getElementById("username").focus();
                            focusObjId = "username";
                            // return false;
                        }else{
                            hideTip("usernameTip");
                        }
                        //如果有需要获得焦点 表示校验没有通过
                        // if(focusObjId){
                        //     focus(focusObjId);
                        //     return false;
                        // }
                        // return true;
                    }

                    function checkpwd(){
                        // 验证密码：必须由字母，数字下划线组成，并且长度为5到12位
                        // var loinPassword = document.getElementById("password").value;
                        var loginpwd = val("password");
                        if (!/^[A-Za-z0-9_]{5,12}$/.test(loginpwd)){
                            showTip("passwordTip","密码：必须由字母，数字下划线组成，并且长度为5到12位");
                            // document.getElementById("password").focus();
                            focusObjId = "password";
                            // return false;
                        }else{
                            hideTip("passwordTip")
                        }
                    }

                    function checkRepwd() {
                        // 2、验证确认密码：和密码相同
                        // var reloginpwd =document.getElementById("repwd").value;
                        var reloginpwd = val("repwd")
                        var loginpwd = val("password");
                        if (!reloginpwd ) {
                            showTip("repwdTip","确认密码不能为空!");
                            // return false
                            focusObjId = "repwd";

                        }else {
                            hideTip("repwdTip")
                        }
                        if (reloginpwd !=loginpwd) {
                            showTip("repwdTip", "两次密码不一致");
                            focusObjId = "repwd";
                            // return false;
                        }else {
                            hideTip("repwdTip");
                        }
                    }
                    function checkeMail(){
                        // 邮箱验证：xxxxx@xxx.com
                        // var email = document.getElementById("email").value;
                        var emails = val("email");
                        if(!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(emails)){
                            //邮箱格式不正确
                            showTip("emailTip","邮箱格式不正确");
                            focusObjId="email";
                            // document.getElementById("email").focus();//让鼠标焦点聚集到房前选中的标签上
                            // return false;
                        }else{
                            hideTip("emailTip")
                        }
                    }
                    // 验证码：现在只需要验证用户已输入。

                    function changeImg() {
                        $('#imgId').attr("src", "http://localhost:8080/shop/VerifyCode.do?" + new Date());

                    }
                    function char(){
                        //验证码框
                        var codeText = $("#code").val();
                        codeText = $.trim(codeText);
                        if (codeText == null || codeText == "") {
                            // $('span.errorMsg').text("验证码不能为空");
                            showTip("codeTip","验证码不能为空");
                            return false;
                        }else if (codeText=$("#imgId").val()) {
                            hideTip("codeTip")
                        }
					}
					//	点击注册
                  function loginchar(){
                        // if ()
				  }





		</script>
	</head>
	<body>
		<div id="login_header">
			<img class="logo_img" alt="" src="../../static/img/logo.gif">
		</div>

		<div class="login_banner">

			<div id="l_content">
				<span class="login_word">欢迎注册</span>
			</div>

			<div id="content">
				<div class="login_form">
					<div class="login_box">
						<div class="tit">
							<h1>注册网上商城会员</h1>
							<span class="errorMsg"></span>
						</div>
						<div class="form">
							<form action="/shop/regist">
								<br/><label>用户名称：</label>
								<input onblur="checkName()" class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username" />
								<span><font id="usernameTip" color="red"></font> </span>
								<br />
								<br />
								<label>用户密码：</label>
								<input onblur="checkpwd()" class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password" />
								<span><font id="passwordTip" color="red"></font> </span>
								<br />
								<br />
								<label>确认密码：</label>
								<input onblur="checkRepwd()" class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd" id="repwd" />
								<span><font id="repwdTip" color="red"></font> </span>
								<br />
								<br />
								<label>电子邮件：</label>
								<input onblur="checkeMail()" class="itxt" type="text" placeholder="请输入邮箱地址" autocomplete="off" tabindex="1" name="email" id="email" />
								<span><font id="emailTip" color="red"></font> </span>
								<br />
								<br />
								<label>验证码：</label>
								<input onblur="char()" class="itxt" type="text" style="width: 150px;" id="code" />
								<span><font id="codeTip" color="red"></font> </span>
								<!--<img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px">-->
								<img id="imgId" onclick="changeImg()" alt="" src="http://localhost:8080/shop/VerifyCode.do" style="float: right; margin-right: 40px">

								<br />
								<br />
								<input type="submit" value="注册" id="sub_btn" />
								<span><font id="sub_btnTip" color="red"></font> </span>

							</form>
						</div>

					</div>
				</div>
			</div>
		</div>
		<div id="bottom">
			<span>
				网上商城.Copyright &copy;2020
			</span>
		</div>
	</body>
</html>
